<template>
  <div  class="Allpadding Toppadding">
      <my-head title="找回密码"></my-head>
      <div class="logo">
                <img src="@/assets/image/logo.png" alt="">     
        </div>
            <p class="font_p">一个账号玩转所有服务</p>
        <div class="forgetpass">
          
               <van-form @submit="onSubmit"  @failed="onFail" ref="form" >
            <van-field
                v-model="form.phone"
                name="phone"
                label="手机号码"
                placeholder="请输入手机号码"
                clearable
                :rules="[
                    { required: true, message: '请填写手机号' },
                    {
                        pattern:reg.phone,
                        message:'请输入正确的手机号'
                    }
                ]"
            />
            <van-field
                v-model="form.captcha"
                center
                clearable
                name="captcha"
                label="短信验证码"
                placeholder="请输入短信验证码"
                :rules="[
                { required: true, message: '请填写验证码' },
                {
                    pattern:reg.code,message:'4位验证码'
                }
                ]"
                >
                <template #button>
                    <van-button v-if="flag" :disabled="!disabled" size="small" native-type="button" type="primary"  @click.stop="startSendSms">发送验证码</van-button>
                    <van-button v-else disabled size="small" native-type="button" >剩余{{count}}S</van-button>
                </template>
                
            </van-field>
            <van-field
                v-model="form.password2"
                name="password2"
                label="新密码"
                placeholder="请输入新密码"
                clearable
               type='text'
                :rules="[
                    { required: true, message: '请填写密码' },
                    {
                        pattern:reg.pwd,message:'请输入6-16的数字字母组合'
                    }
                ]"
            />
            <div style="margin: 16px;">
                <van-button  block type="warning" native-type="submit">确认修改</van-button>
            </div>
        </van-form>

        </div>
  </div>
</template>

<script>
var timer = null
export default {
data() {
  return {
     password: '',
      form:{

          },
      flag:true,
      count:120
  }
},
computed:{
        disabled(){
            // 检测手机号 
            return this.reg.phone.test(this.form.phone)
        }
    },
destroyed(){
        clearInterval(timer)
        timer = null;
    },

  methods: {
    onSubmit(values) {
      console.log(values.password2);
      console.log('submit', values);
       this.$ajax.findUser({
                phone:this.form.phone
            })
            .then(result=>{
                if(result.length>0){
                    // 验证验证码
                    // console.log(result[0].id);
                    this.$ajax.checkCaptcha(this.form.phone)
                    .then(res=>{
                        if(res.code==200){
                            // 验证成功 
                            this.changeUserInfo(result[0]);

                            this.$ajax.setUser({
                                     password:values.password2
                                        },result[0].id).then(res=>{                         
                                      this.$toast.success('修改成功')
                                     this.$router.push({
                                        name:'login'
                                      })
                                      })
                              }else{
                                  this.$toast(res.message || "验证码错误")
                              }
                    })
                }else{
                    this.$toast("当前手机号未被注册,不能校验")
                }
            })
    },
     timeDown(){
            this.count--;
            this.flag = false;
            timer = setInterval(()=>{
                if(this.count>0){
                    this.count--;
                    this.flag = false;
                }else{
                    clearInterval(timer)
                    timer = null;
                    this.flag = true;
                    this.count = 120;
                }
            },1000)
        },
        sendSms(){
            // 真正的发送验证码
            // 先判断这个用户是否被注册
            this.$ajax.findUser({
                phone:this.form.phone
            })
            .then(res=>{
                if(res.length>0){
                    // 发送
                    this.$ajax.getCaptcha({
                         phone:this.form.phone
                    })
                    .then(res=>{
                        if(res.code==200){
                            // 成功
                            this.$toast("验证码发送成功")
                        }else{
                            this.$toast("验证码发送失败")
                        }
                    })
                }else{
                    this.$toast("当前手机号未被注册")
                }
            })
        },
        startSendSms(){
            console.log("发送验证码")
            this.timeDown()
            this.sendSms()
        },
         onFail(){
            this.showErrMsg("校验失败")
        },
        
  },


}

</script>

<style>
.logo{
    margin-top: 10px;
    width: 150px;
    height: 100px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
}
.font_p{
     font-size: 16px;
    text-align: center;
}
.logo img{
    width: 100%;
}
.forgetpass{
    margin-top: 20px;
}

</style>